<template>
	<div class="container">
		<navigationBar title="新增关注"></navigationBar>
		<div class="content" :style="'padding-top: ' + (navigationBarHeight-1) + 'px;'">
			<div class="list">
				<div class="item" v-for="(item,index) in list" :key="index">
					<a class="user-avatar" @click="$navSkin.toPersonel(item.userId)">
						<image class="avatar-item user-avatar" :src="item.avatar" mode="aspectFill"></image>
					</a>
					<div class="main">
						<div class="info">
							<div class="user-info">{{item.nickname}}</div>
							<div class="interaction-hint">
								<span>Ta关注了你</span>
								<span class="interaction-time">{{item.createTime}}</span>
							</div>
						</div>
						<div class="extra">
							<div class="btn-active" v-if="!item.isFollow" @click="toFollowFans(item.userId,index)">回关
							</div>
							<div class="btn" v-else @click="unfollow(item.userId,index)">取消关注
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	import data from '@/js/index/notificationFollow/data.js';
	import methods from '@/js/index/notificationFollow/methods.js';
	import {
		mapState
	} from 'vuex';
	import navigationBar from '../../components/navigationBar.vue';


	export default {
		data,
		methods,
		onLoad() {
			this.getData()
		},
		onPullDownRefresh() {

		},
		onShow() {


		},
		onHide() {

		},
		onUnload() {

		},
		components: {
			navigationBar,
		},
		computed: {
			...mapState(['navigationBarHeight', 'userInfo'])
		},
		filters: {
			// fmtContent(value) {
			// 	value = JSON.parse(value)
			// 	if (value.message_type === 'image') {
			// 		return '[图片消息]'
			// 	} else {
			// 		return value.content
			// 	}
			// }
		}
	};
</script>
<style>
	page {
		background: #FFF;
	}

	uni-page {
		background: #FFF;
	}
</style>
<style scoped lang="scss">
	@import '~@/style/index/notificationFollow.scss';
</style>